<template>
	<view class=""  :style="viewColor">
		<view style="h100">
			 <view v-if="preSaleDate && dateList.length" class="skeleton-rect">
				 <calendarSwiperBus  
				  @handlerCalendar="handlerCalendar"
				  @handlerAllCalendar="handlerAllCalendar"
				  :dptDate="dptDate"
				  :saleDate="preSaleDate"
				  :dateList="dateList"
				  :tempDateObj="tempDateSwiper"
				  class="skeleton-rect"
				  >
				  </calendarSwiperBus>
			 </view>
			  
			<scroll-view   v-if="regularList&&regularList.length&&!isLoadingData"  bindscrolltolower="lower" class="scroll-wrap mt-5" lowerThreshold="150" :scrollTop="scrollTop" :scroll-y="true" :style="'height:'+scrollHeight+'px'" upperThreshold="50">
				<view  class="mb-5 regular-block"v-for="(item, index) in regularList" :key="index" >
					<view  @click="showDetail(index)"  class="row-center regular-item " :style="item.is_sell==1?'':'opacity: 0.5 !important;'">
						<view  class="dp-time display-flex-column">
							<view class="row-center">
								<view class="display-flex-column">
									<text  v-if="item.plan_type==3&&!item.is_must" class="text-10 ft-w500"  style="color: #959595;">预约满{{item.lowest_num}}人发车</text>
									<text  v-if="item.plan_type==3&&item.is_must" class="text-10 ft-w500"  style="color: #ff5500;">已拼车成功</text>
									<view v-if="item.plan_type==2" class="text-10 ft-w500" >{{item.division_time}}分钟一班</view>
									<text :style="item.is_sell==1?'':'color: #c8c8c8 !important;'">{{item.dp_time}}</text>
									<text class="color-999 text-12 mt-5">约{{converTime(item.product.duration)}}</text>
								</view>
								<!-- <view v-if="item.plan_type==2" class="text-14 color-999 ft-w700 ml-2" >前乘车</view> -->
							</view>
					
							<view v-if="item.plan_type==2" class="plan-type-title">
								滚动发车<text class="mr-2 ml-2">></text>
							</view>
							<view v-if="item.plan_type==3"  class="plan-type-title">
								预约班<text style="mr-2 ml-2">></text>
							</view>
						</view>
						<!-- <view class="display-flex-column display-flex-align-center">
							<view class="dot_grey"></view>
							<view class="shu-line" style="margin: 7px 0;"></view>
							<view class="dot_grey"></view>
						</view> -->
						<view class="display-flex-column">
							<view class="row-center relative stop_name" >
								<view class="dot "></view>
								<view class="text-black ft-w700 line2" :style="item.is_sell==1?'':'color: #c8c8c8 !important;'">
								    {{item.start_stop_name}}
								</view>
							</view>
		
							<view class="row-center relative stop_name" >
								<view class="dot arr"></view>
								<view class="text-black ft-w700 line2" :style="item.is_sell==1?'':'color: #c8c8c8 !important;'">
								     {{item.end_stop_name}}
								</view>
							</view>
							<view  class="row-center" style="color: #c8c8c8;font-size: 12px;">
							    <text class="iconfont icon-zhandian" style="margin: 5px 10px;font-size: 10px;" ></text>
								<view style="color:  var(--view-theme);" class="row-center" @click.stop="wayPoints(item)">
								    <text>途经{{item.stations_num}}个站点</text>
									<text class="iconfont icon-ic_right" style="font-size: 14px;"></text>
								</view>
							</view>
							<view v-if="item.is_return_trip" class="row-center" style="color: #c8c8c8;font-size: 12px;">
					            <text class="iconfont icon-ic-complete" style="margin: 5px 10px;font-size: 10px;" ></text>
								<view style="color:  var(--view-theme);" class="row-center" @click.stop="planDesc(item)">
								    <text>往返票</text>
									<text class="iconfont icon-ic_right" style="font-size: 14px;"></text>
								</view>
							</view>
						</view>
					    <view class="display-flex-column"  style="margin-left: auto;margin-right: 15px;">
					    	<view class="" style="color: #fd7d21;text-align: right;" :style="item.is_sell==1?'':'color: #c8c8c8 !important;'">
								<!-- <priceFormat class="ml-auto mr-10" :price="item.adult_price" weight intSize="40" floatSize="20" labelSize="26"></priceFormat> -->
					    	    <priceFormat class="ml-auto mr-10" :price="item.linePlanMeal&&item.linePlanMeal.length?item.linePlanMeal[0].adult_price:0" weight intSize="40" floatSize="20" labelSize="26"></priceFormat>
							</view>
							<text style="font-size: 14px;">余票 {{item.stock}}</text>
					    </view> 
					</view>
					<view class="de-block " v-if="item.is_show">
						<view class="display-flex display-flex-align-center mb-5">
							<div class="tc-head-shu"></div>
							<div class="text-14">套餐选择</div>
						</view>
						<view v-if="item.linePlanMeal && item.linePlanMeal.length"
						 class="display-flex tc-block" v-for="(meal,mealIndex) in item.linePlanMeal" :key="mealIndex">
							<view class="tc-bl-left">
								<div class="text-14">{{meal.title}}</div>
								<div class="color-999 text-12" @click.stop="showProductDetail(item.product)">
									<text class="iconfont  icon-ic_list text-12" style="color: #fd7d21;"></text>
									<text class="ml-5 ">产品详情</text>
									<text class="iconfont icon-ic_right  text-12"></text>
								</div>
							</view>
							<view class="tc-bl-right">
								<text class="tc-price" >
									<text class="text-12">￥</text>
									<text class="text-16 ft-w700 mr-2">{{meal.adult_price}}</text>
									<text class="text-10 color-999">起</text>
								</text>
								<view class="yud-button" @click.top="toRegularDetail(item, meal)">
									立即预定
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="" style="text-align: center;margin: 10px;">
					共找到{{regularList.length}}条结果
				</view>
			</scroll-view>
			<view v-else-if="isLoadingData" class="display-flex-align-center" style="text-align: center;margin-top: 300px;">
				<image style="width: 50px;height: 50px;" src="/static/images/loading.gif" ></image>
			</view>
			<view v-else class="display-flex-align-center display-flex-column display-flex-justify-center" style="margin-top: 100px;">
				<emptyPage title="当前日期暂无班次~" :noImage="`${domain}/static/images/noRecord.png`"></emptyPage>
				<view class="mini-blue-button" @click="handlerAllCalendar">
					换个日期
				</view>
			</view>
		</view>
		<uni-popup ref="bindmobile" type="bottom" :safe-area="true" background-color="#fff">
			
			<!-- <calendar :salesDates="calendarDates"  @callback="dateChange" >
			</calendar>
			 -->
			 <scroll-view class="" style="height: 500px;">
			 	<calendar :salesDates="dateList" :start-date="dptDate" @callback="dateChange" :initMonth="3" @colseCal="colseCal">
			 	</calendar>
			 </scroll-view>
		</uni-popup>
		<uni-popup ref="returnDate" type="bottom" :safe-area="true" background-color="#fff">
			 <view class="bg-white br-8" style="height: 300px;">
			 	<view class="popup-header">
			 		<view class="popup-title">
			 			班次说明
			 		</view>
			 		<view @click="returnDateColse" class="popup-close1 iconfont icon-ic_close text-18">	</view>
			 	</view>
				<view class="return-bock">
					<view class="">
					  <text class="iconfont icon-ic-complete color-green mr-5"></text>
					  <text class="text-black ft-w700">往返票</text>
					</view>
					<view class="mt-10" v-if="planDescItem.return_trip_date">
						{{planDescItem.return_trip_date}}从<text class="color-blue">{{planDescItem.end_stop_name}}</text>返回至<text class="color-blue">{{planDescItem.start_stop_name}}</text>
					</view>
					<view class="mt-10" v-else>
						<text class="color-blue">返程时间待定</text>
					</view>
				</view>
			 </view>
		</uni-popup>
		<uni-popup ref="stopRef" type="bottom" :safe-area="true" background-color="#fff">
			 <view class="bg-white br-8" style="height: 350px;">
			 	<view class="popup-header">
			 		<view class="popup-title">
			 			班次说明
			 		</view>
			 		<view @click="stopListColse" class="popup-close1 iconfont icon-ic_close text-18">	</view>
			 	</view>
				<scroll-view :scroll-y="true" style="height:270px;padding-bottom: 30px;">
					<view style="  margin: 0 10px;">
						<view v-if="planDescItem.lineStops&&planDescItem.lineStops.length" style="margin-top: 10px;">
		
							<view class="">
								<!-- 去程信息 -->
								<view class="bus-detail-header in-desc-header-container">
									<view class="header-row info-line" style="margin-top: -4px;"> 
										<view class="info-tag">	{{planDescItem.is_return_trip?'去程':'出发'}}	</view>
										<view class="">{{planDescItem.date_md}}  {{planDescItem.date_week}}</view>
										<view class="flex1"></view>
										<view class="iconfont icon-ic_clock2 mr-5"></view>
										<view class="">	约{{convertMinutesToHours(planDescItem.product.duration)}}小时</view>
									</view>
									<view class="header-row  display-flex-align-center header-section mb-10">
										<view class="flex1">
											<view class="header-row station-row">
												<view class="dot "></view>
												<view class="time">	{{planDescItem.lineStops[0].departure_time}}</view>
												<view class="flex1">
													<view class="">
														{{planDescItem.lineStops[0].stop.name}}
													</view>
													<view v-if="planDescItem.lineStops[0].stop.remark" class="station-text">
														{{planDescItem.lineStops[0].stop.remark}}
													</view>
												</view>
												
											</view>
											<view class="header-row station-row">
												<view class="dot arr"></view>
												<view class="time">	{{planDescItem.lineStops[planDescItem.lineStops.length-1].departure_time}}</view>
												<view class="flex1">
													<view class="">
														{{planDescItem.lineStops[planDescItem.lineStops.length-1].stop.name}}
													</view>
													<view v-if="planDescItem.lineStops[planDescItem.lineStops.length-1].stop.remark" class="station-text">
														{{planDescItem.lineStops[planDescItem.lineStops.length-1].stop.remark}}
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								<!-- 去程信息 -->
								<!-- 返程信息 -->
								<view v-if="planDescItem.is_return_trip" class="bus-detail-header in-desc-header-container">
									<view class="header-row info-line" style="margin-top: -4px;"> 
										<view class="info-tag">	返程	</view>
										<view v-if="planDescItem.return_trip_date" class="">{{planDescItem.return_trip_date_md}}  {{planDescItem.return_trip_date_week}}</view>
										<view v-else class="color-blue">
											返程时间待定，具体时间请咨询客服
										</view>
									</view>
									<view v-if="planDescItem.return_trip_date"  class="header-row  display-flex-align-center header-section mb-10">
										<view class="flex1">
											<view class="header-row station-row">
												<view class="dot "></view>
												<view class="time">	{{planDescItem.return_trip_date_dptime}}</view>
												<view class="flex1">
													<view class="">
														{{planDescItem.lineStops[planDescItem.lineStops.length-1].stop.name}}
													</view>
													<view v-if="planDescItem.lineStops[planDescItem.lineStops.length-1].stop.remark" class="station-text">
														{{planDescItem.lineStops[planDescItem.lineStops.length-1].stop.remark}}
													</view>
												</view>
												
											</view>
											<view class="header-row station-row">
												<view class="dot arr"></view>
												<view class="time">	{{addMinutesToTime(planDescItem.return_trip_date_dptime,planDescItem.product.duration)}}</view>
												<view class="flex1">
													<view class="">
															{{planDescItem.lineStops[0].stop.name}}
													</view>
													<view v-if="planDescItem.lineStops[0].stop.remark" class="station-text">
														{{planDescItem.lineStops[0].stop.remark}}
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								<!-- 返程信息 -->
							</view>
							
							<view  @click="lookStation(item.stop)" v-for="(item,index) in planDescItem.lineStops" :key="index" class="display-flex-column" style="align-items: flex-start;">
								<view class="display-flex-column" style="margin-left: 10%;">
									<view class="row-center" style="justify-content: center;">
										<text  class="ft-w700 " style="width: 40px;">{{item.departure_time}}</text>
										<view class="dot-unipop" :style="(item.stop_type==2)?'background-color: #f5190a;':'background-color: #00b87a;'"></view>
										<text   class="ft-w600 ">{{item.stop.name}}</text>
									</view>
									<view v-if="index!=(planDescItem.lineStops.length-1)" class="shu-fg" style="margin-left: 53px;"></view>
								</view>
									
							</view>
							
						</view>
					</view>
				</scroll-view>
			 </view>
		</uni-popup>
		<uni-popup ref="buyDetailRef" type="bottom"  background-color="#fff">
			<view class="bg-white br-8" :style="'height:'+windowHeight*0.82+'px' ">
				<view class="popup-header"> 
					<view class="popup-title">
						购买须知
					</view>
					<view @click="closeBuyDetail" class="popup-close1 iconfont icon-ic_close text-18"></view>
				</view>
				<view class="">
					<view class="header-tab-box" style="margin: 0 70px;">
						<view class="header-tab-item " @click="changeNav(indexv)" v-for="(nav ,indexv) in navList" :key="indexv">
							<text>{{nav}}</text>
							<view v-if="indexv == navActive" class="header-tab-barline"></view>
						</view>
					</view>
				</view>
				<view class=" mt-10 ml-10 mr-10" v-if="productInfo">
					<scroll-view v-if="navActive == 0" :scroll-y="true"  :style="'height:'+windowHeight*0.8+'px' ">

						<view  class="">

							<view  v-if="productInfo.content.content" class="tag-content" v-html="productInfo.content.content"></view>
							<view v-else style="text-align:center;margin-top: 100px;">
								暂无产品详情
							</view>
						</view>
						<view style="height: 120px;"></view>
						
					</scroll-view>
					<scroll-view v-if="navActive == 1" :scroll-y="true"  :style="'height:'+windowHeight*0.8+'px' ">
						<view class="">
							<view class="tag-title">
							  退改规则
							</view>
							<view class="tag-content">
								1.本产品暂不支持线上改签功能
							</view>
							<view class="tag-content">
								2.因我司原因造成无法出行，我司将进行全额退款。
							</view>
							<view class="tag-content">
								3.因乘客个人原因造成无法出行的，按以下规则处理：
							</view>
							<view class="mt-10 mb-10">
								<view class="cost-table">
									<!-- 1儿童限制2年龄限制3人群限制 -->
									<view class="cost-table-td">
										<view class="cost-table-td-left color-66 ft-w500" style="width: 200px;background: #efeff4;">
											取消时间
										</view>
										<view class="cost-table-td-right color-66 ft-w500" style="background: #efeff4;">
											损失费用
										</view>
									</view>
									<view class="cost-table-td" v-for="(refundRate,indexl) in productInfo.productRefundRate" :key="indexl">
										<view class="cost-table-td-left ft-w500" style="width: 200px">
											{{filterRefund(refundRate)}}
										</view>
										<view class="cost-table-td-right color-66">
											{{refundRate.value}}%
										</view>
									</view>
								</view>
							</view>
							<view class="tag-content">
								4.若产生退款，将在1-7个工作日内原渠道退回。
							</view>
							<view class="tag-content">
								5.若班次类型为预约班，如预约失败，系统自动全额退款。
							</view>
						</view>
						<view  class=""  v-if="productInfo.productRefundRule.content">
							<view class="tag-title">
							  退改特别说明：
							</view>
							<view  v-if="productInfo.productRefundRule.content" class="tag-content" v-html="productInfo.productRefundRule.content"></view>
						</view>
						<view style="height: 120px;"></view>
						
					</scroll-view>
					
				</view>
			</view>
		</uni-popup>
		
		<view style="display: none;">
			{{flag}}
		</view>
		
	</view>
</template>

<script>
	let windowHeight = uni.getSystemInfoSync().windowHeight ;

    import calendarSwiperBus from '@/components/calendar_swiper_bus/index'
	import calendar from '@/components/calendar/index'
	import { getLineDatePlan ,getPlanDateRecent} from "@/api/bus"
	import { showProductOther} from "@/api/store.js"
	
	
	import dayjs from '@/utils/day.js'
	import util from '@/utils/util.js'
	import emptyPage from '@/components/emptyPage.vue'
	import { HTTP_REQUEST_URL } from '@/config/app';
	import { toLogin } from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import {
		postCartTourAdd,
	} from '@/api/store.js';
	export default {
		components:{ calendarSwiperBus, calendar, emptyPage },
		computed: mapGetters(['isLogin', 'viewColor']),
		data() {
			return {
				tagStyle: {
					img: 'width:100%;display:block;'
				},
				windowHeight: windowHeight,
				domain: HTTP_REQUEST_URL,		
				currSpid: '',
				dptDate: '',
				preSaleDate: '',
				saleDays: 5,
			    disablePrev: false,
				disableNext: false,
				info: {
					lunar: true,
					range: true,
					insert: true,
					selected: []
				},
				calendarShow: false,
				busLineInfo:'',
				calendarDates:'',
				scrollTop:0,
				scrollHeight: '',
				winHeight:'',
				regularList:[],
				isLoadingData:true,
				destinationId:0,
				wapPointsShow:false,
				start_city_id: '',
				end_city_id: '',
				start_stop_id: '',
				end_stop_id: '',
				tempDateSwiper: {},
				dateList: [],
				planDescItem: '',
				flag: 0,
				navList: ['产品说明', '退改须知'],
				navActive: 0,
				productInfo: '',
	
			}
		},

		onLoad(options) {	
			this.start_city_id = options.start_city_id;
			this.end_city_id = options.end_city_id;
			this.start_stop_id = options.start_stop_id;
			this.end_stop_id = options.end_stop_id;
			this.dptDate = options.date;
			this.initDateList()
			// this.setInitDate(options)
			this.getRegularList(options.date, true)
			uni.setNavigationBarTitle({
			　　title:options.origin+'-'+options.destination
			})
		
			
		
			
			
		},
		onReady() {
		
		},
		methods:{
			showProductDetail(product){
				var that= this;
				// this.productInfo = product;
				// this.navActive = 0;
				// this.$refs.buyDetailRef.open();
				if(!product.product_id){
					return that.$util.Tips({
						title: "查询失败"
					});
				}
				uni.showLoading({
					title:"请稍后"
				})
				showProductOther(product.product_id)
					.then(function(res) {
						uni.hideLoading()
						console.log(res.data)
						setTimeout(() => {
							that.productInfo = res.data;
							that.navActive = 0;
							that.$refs.buyDetailRef.open();
						},100)
					})
					.catch(res => {
							uni.hideLoading()
						return that.$util.Tips({
							title: res
						});
					});
			},
			closeBuyDetail(){
				this.$refs.buyDetailRef.close()
			},
			changeNav(index){
				this.$set(this, 'navActive', index);
			},
			setScrollHeight: function() {
				var t = this;
				uni.getSystemInfo({
					success: function(e) {
						var a = e.windowWidth - 30, i = 18 * Math.ceil(520 / a);
						t.winHeight = e.windowHeight,
						t.scrollHeight = (e.windowHeight -50 - i)
					}
				});
			},
			handlerAllCalendar:function(){
				this.$refs.bindmobile.open()
			},
			filterRefund(refundRate){
				// switch (refundRate.type) {
				// 	case 1:
				// 		return "使用前"+ (refundRate.refund_time?  refundRate.refund_time +'分钟（含）之前':'')
				// 	case 2:
				// 		return "使用前"+ (refundRate.refund_time?  refundRate.refund_time +'分钟之后':'');
			
				// }
				switch (refundRate.type) {
					case 1:
						return  "使用前"+ this.convertMinutesToTimeAgo(refundRate.refund_time)+'（含）之前'
					case 2:
						return  "使用前"+  this.convertMinutesToTimeAgo(refundRate.refund_time)+'之后';
				
				}
			},
					
			convertMinutesToTimeAgo(minutes) {
			  const days = Math.floor(minutes / (24 * 60));
			  const remainingMinutes = minutes % (24 * 60);
			  const hours = Math.floor(remainingMinutes / 60);
			  const minutesPart = remainingMinutes % 60;
			
			  let result = '';
			  if (days > 0) {
			    result += `${days}天前`;
			    if (hours > 0 || minutesPart > 0) {
			      result += `${hours.toString().padStart(2, '0')}:${minutesPart.toString().padStart(2, '0')}`;
			      if (hours === 0 && minutesPart === 0) {
			        result = result.slice(0, -1);
			      }
			    } else {
			      result = result.slice(0, -1);
			    }
			  } else if (hours > 0) {
			    result += `${hours}小时${minutesPart > 0? `${minutesPart}分钟` : ''}`;
			  } else {
			    result += `${minutesPart}分钟`;
			  }
			
			  return result;
			},
			
			initDateList(){
				this.preSaleDate = util.addDay(60).day
				console.log('this.preSaleDate',this.preSaleDate)
				for (var i = 0; i <61; i++) {
					this.dateList.push({
						date: dayjs((dayjs(dayjs().format('YYYY-MM-DD')).unix()+ 86400*i)*1000).format('YYYY-MM-DD')
				
					})
				}
			},
			
			/**获取班次列表*/
			getRegularList:function(date, isFirst){
				let that = this
				that.regularList = []
				that.scrollHeight = ''
				that.isLoadingData = true
				this.setScrollHeight()
				getLineDatePlan({
						start_city_id: that.start_city_id,
						end_city_id: that.end_city_id,
						start_stop_id: that.start_stop_id,
						end_stop_id: that.end_stop_id,
						date: date,
					}).then(res => {
					that.regularList = res.data.list;
					that.isLoadingData = false;
					
					if(that.regularList.length== 0 && isFirst){
						// 去查询最近的有班次的日期
						getPlanDateRecent({
								start_city_id: that.start_city_id,
								end_city_id: that.end_city_id,
								start_stop_id: that.start_stop_id,
								end_stop_id: that.end_stop_id,
							}).then(res1 => {
								console.log('res1',res1)
								if(res1.data){
									
									that.$util.Tips({
										title: '当前日期暂无班次，已为您跳转至最近售卖日期'
									})
									that.recentChangeDate(res1.data)
									
								}
								
						
						    })
					} else{
						for(var i = 0; i< this.regularList.length; i++){
							this.regularList[i].is_show = false;
						}
					}
				})
				
				
			},
			
			handlerCalendar:function(t){
				this.dptDate = t.currentDate
				this.getRegularList(this.dptDate, false)
		
			},
			dateChange:function(date){
				var that = this;
				this.dptDate = date.startStr.dateStr;	
				console.log('this.dptDate',this.dptDate)
				this.getRegularList(this.dptDate,false)
				const found = this.dateList.find(function(element) {  
				  return that.dptDate == element.date;  
				}); 
					
				if(found != undefined){
					this.tempDateSwiper = {
						date: that.dptDate,
					};
				}
			
				this.$refs.bindmobile.close()
			},
			recentChangeDate:function(date){
				var that = this;
				this.dptDate = date;	
				console.log('this.dptDate',this.dptDate)
				this.getRegularList(this.dptDate,false)
				const found = this.dateList.find(function(element) {  
				  return that.dptDate == element.date;  
				}); 
					
				if(found != undefined){
					this.tempDateSwiper = {
						date: that.dptDate,
					};
				}
			
				this.$refs.bindmobile.close()
			},
			colseCal(){
				this.$refs.bindmobile.close()
			},
			
			lookStation:function(item){
				let that = this
			
				uni.showActionSheet({
					itemList: ['查看实景图','导航去这里'],
					success: function (res) {
						that.daClick(res.tapIndex,item)
					},
					fail: function (res) {
						
					}
				});
				
			
			},
			//导航
			daClick:function(e,item) {
				var that = this
				if(e==1){
					const arr = item.lng_lat.split(";");
					uni.openLocation({
						//​使用微信内置地图查看位置。
						latitude: parseFloat(arr[1]),
						longitude: parseFloat(arr[0]),
						name: item.name
					});
				} else {
					
				   item.pics&&item.pics.length?that.joinQun(item):that.$util.Tips({title: '该站点暂无站点图片'});
				}
			},
			joinQun:function(item){
				   // 预览图片
				
				   var that = this
				   
				   var 	urls = item.pics;
			
				   uni.previewImage({
					current: 0,   
				   	urls: urls,
					fail(err) {
						
					}
				   });
			},
		
			wayPoints(planDescItem){
				this.planDescItem = planDescItem;
				if(planDescItem.lineStops.length < 2) return  this.$util.Tips({
						title: "暂无站点信息"
					})
				this.$refs.stopRef.open();
			},
			converTime(minutes) {  
			    if (minutes === 0) {  
			        return "0分"; // 或者直接返回 "0"，看具体需求  
			    }  
			      
			    const hours = Math.floor(minutes / 60);  
			    const remainingMinutes = minutes % 60;  
			      
			    if (remainingMinutes === 0) {  
			        return `${hours}时`;  
			    } else {  
			        return `${hours}时${remainingMinutes}钟`;  
			    }  
			},
			extractTime(dateTimeString) {  
			    // 使用字符串的 split 方法按空格分割字符串  
			    const parts = dateTimeString.split(' ');  
			      
			    // 返回第二个部分，即时间部分  
			    return parts[1];  
			}, 
			goBuy: function(item,meal) {
				if (this.isLogin === false) {
					toLogin()
				} else {
				
					this.goCat(item,meal);
				}
			},
			goCat: function(item,meal) {
				let that = this;
				
			    var product_id = item.product.product_id;
				var line_plan_id = item.id;
				if(!item.linePlanMeal.length){
					return that.$util.Tips({
						title: "暂无班次套餐信息"
					});
				}
				var line_plan_meal_id = meal.id;
				let q = {
					is_new: 1,
					mer_id: item.mer_id,
					product_id: product_id,
					cart_num: 1,
					adult_num:  1,
					child_num: 0,
					old_num: 0,
					product_attr_unique: item.unique,
					source: '',
					product_type: 0,
					spread_id: '',
					line_plan_id: item.id,
					line_plan_meal_id: line_plan_meal_id,
					price_date: item.date,
					tour_type: item.product.tour_type,
				};
			
					
				postCartTourAdd({data: q})
					.then(function(res) {
						let cartId = res.data.cart_id

						uni.navigateTo({
							url: '/pages/users/busOrderConfirm/index?cartId=' + cartId+'&product_id='
							+product_id+'&sku_unique='+''+'&selectDay='+item.date+'&line_plan_id=' + line_plan_id+'&line_plan_meal_id=' + line_plan_meal_id
						});
					})
					.catch(res => {
						return that.$util.Tips({
							title: res
						});
					});
				},
				
			showDetail(index){
				for(var i = 0; i< this.regularList.length; i++){
					if(i == index){
						// this.regularList[i].is_show = true;
						this.$set(this.regularList[i],'is_show',!this.regularList[i]['is_show'])
					} else {
						// this.regularList[i].is_show = false;
						this.$set(this.regularList[i],'is_show',false)
					}
				}
				this.flag++
				console.log("this.regularList",this.regularList)
			},
			/**跳转班次详情*/
			toRegularDetail:function(item, meal){
				var that = this;
				// console.log(item)
				if (item.stock <= 0 )
					return that.$util.Tips({
						title: "库存不足"
					});
					
				// if(item.adult_price <= 0){
				// 	return that.$util.Tips({
				// 		title: "当前日期价格未设置"
				// 	});
				// }	
				var sellNotice = '';
				if(item.product.limit_deadline){
					sellNotice = '该班次最晚需在发车前'+ item.product.deadline_day+'天'+  item.product.deadline_hour+'前购买';
				} else {
					sellNotice = '该班次已过最后购买时间！请选择其他班次进行购买';
				}
				
				
				if(item.is_sell==0){
					uni.showModal({
					    title: '温馨提示',
					    content: sellNotice,
						showCancel: false,
						confirmText: '我已知晓',
					    success: function (res) {
					        if (res.confirm) {
					            console.log('用户点击确定');
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
				} else{
					
					
					this.goBuy(item,meal);
					
				}
				
				
			},
			planDesc(item){
				this.planDescItem = item;
				this.$refs.returnDate.open()
			},
			

			returnDateColse(){
				this.$refs.returnDate.close()
			},
			stopListColse(){
				this.$refs.stopRef.close()
			},
			convertMinutesToHours(minutes) {
			  return (minutes / 60).toFixed(1);
			},
			addMinutesToTime(timeStr, minutesToAdd) {
			  const [hours, minutes] = timeStr.split(':').map(Number);
			  let totalMinutes = hours * 60 + minutes + minutesToAdd;
			  while (totalMinutes >= 24 * 60) {
			    totalMinutes -= 24 * 60;
			  }
			  const newHours = Math.floor(totalMinutes / 60);
			  const newMinutes = totalMinutes % 60;
			  return `${newHours.toString().padStart(2, '0')}:${newMinutes.toString().padStart(2, '0')}`;
			},
		}
		
	}
</script>

<style>
	page{
		background-color: #f4f3fa;
	}
	.regular-block {
		margin: 0 5px 5px 5px;
		    border-radius: 5px;
		border-radius: 5px;
		box-shadow: 0px 0px 16rpx rgba(0, 0, 0, 0.08);
		background-color: #fff;
	}
	.regular-item{
		height: 110px;
		/* background-color: #FFFFFF; */
	}
	.dp-time{
		font-size: 40rpx;
		font-weight: 700;
		color: #000000;
		width: 100px;
		align-items: center;
		margin-left: 5px;
	}
	.plan-type-title{
		color: var(--view-theme);
		margin-top: 2px;
		padding: 0 4px;
		height: 20px;
		border: 1px solid var(--view-theme);
		border-radius: 3px;
		line-height: 20px;
		font-size: 10px;
		font-weight: 400;
		display: flex;
		align-items: center;
	}
	.return-bock{
		margin: 10px;
		border: 1px solid #f3f3f3;
		padding: 10px;
		border-radius: 5px;
		background: #fdfdfd;
	}
	.de-block{
		/* background-color: #fde3af; */
		padding: 0 20px 10px 20px;
	}
	.tc-block{
		width: 100%;
		background-color: #f5fbff;
		border-radius: 10px;
		padding: 5px 10px;
		height: 80px;
		margin-bottom: 8px;
	}
	.tc-head-shu{
		background-color: var(--view-theme);
		width: 3px;
		height: 12px;
		border-radius: 20px;
		margin-right: 5px;
	}
	.tc-bl-left {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.tc-bl-right {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-left: auto;
	}
	.tc-price{
		color: #fd7d21;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
	}
	.yud-button{
		background-color: #fd7d21;
		border-radius: 5px;
		color: #fff;
		padding: 5px 10px;
		font-size: 14px;
		
	}
	
	.tag-title {
	    color: #333;
	    font-size: 17px;
	    padding: 8px 0 3px;
	    font-weight: 800;
	    line-height: 20px;
	}
	 .tag-content {
	    color: #333;
	    font-size: 14px;
	    line-height: 25px;
	}
	.dot-unipop{
		height: 6px;
		width: 6px;
		border-radius: 50%;
		margin: 11px
	}
	.dot {
	    height: 6px;
	    width: 6px;
	    border-radius: 50%;
	    background-color: #00b87a;
	    margin: 11px
	}
	 .dot:after {
	    position: absolute;
	    content: "";
	    width: 4px;
	    background-color: #f4f4f4;
	    left: 12px;
	    top: calc(50% + 6px);
	    bottom: 0;
	    z-index: 0;
	    overflow: visible;
	}
	.dot.arr:after {
	    top: 0;
	    bottom: calc(50% + 6px);
	}
	.dot.arr {
	    background-color: #f5190a
	}
	.stop_name{
		height: 30px;
		position: relative;
		max-height: 50px;
		max-width: 220px;
	}
	
	.shu-fg {
		border-left: 1px solid  #a7a7a7;
		height: 15px;
	}
	
	.bus-detail-header .header-row {
	    display: flex;
	    flex-direction: row;
	    align-items: center
	}
	
	.bus-detail-header .info-line {
	    line-height: 30px;
	    padding-right: 15px
	}
	.bus-detail-header .info-line .info-tag {
	    top: 0;
	    height: 22px;
	    line-height: 22px;
	    background-color: #99afca;
	    color: #fff;
	    padding-left: 15px;
	    padding-right: 10px;
	    position: relative;
	    margin-right: 15px;
	}
	.bus-detail-header .info-line .info-tag:after {
	    content: "";
	    position: absolute;
	    left: 100%;
	    top: 0;
	    height: 0;
	    width: 0;
	    border-radius: 0 3px 0 0;
	    border-color: #99afca transparent transparent #99afca;
	    border-style: solid;
	    border-width: 11px 4px
	}
	.bus-detail-header .header-section {
	    padding: 5px 15px 0 8px;
	}
	.bus-detail-header .station-row {
	    font-weight: 500;
	    position: relative;
	}
	.bus-detail-header .dot {
	    height: 6px;
	    width: 6px;
	    border-radius: 50%;
	    background-color: #00b87a;
	    margin: 11px
	}
	.bus-detail-header .station-row .dot:after {
	    position: absolute;
	    content: "";
	    width: 4px;
	    background-color: #f4f4f4;
	    left: 12px;
	    top: calc(50% + 6px);
	    bottom: 0;
	    z-index: 0;
	    overflow: visible;
	}
	.bus-detail-header .station-row .dot.arr:after {
	    top: 0;
	    bottom: calc(50% + 6px);
	}
	.bus-detail-header .dot.arr {
	    background-color: #f5190a
	}
	.bus-detail-header .station-row .time {
	    font-size: 15px;
	    font-weight: 600;
	    text-align: left;
	    width: 54px;
	    flex-shrink: 0
	}
	.bus-detail-header .station-row .station-text {
	    font-size: 12px;
	    color: #999;
	}
	.bus-detail-header .header-section .show-station-btn {
	    color: #5678a8;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	    font-size: 12px;
	    user-select: none;
	}
	.bus-kn {
		margin: 0 10px 10px 10px;
		border-radius: 8px;
	}
	.bg-w{
		z-index: -1;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 700px;
		background: -webkit-linear-gradient(180deg, #e2fff4 0, #eef1f6);
		background: -o-linear-gradient(to bottom, #e2fff4 0, #eef1f6 100%);
		background: -moz-linear-gradient(to bottom, #e2fff4 0, #eef1f6 100%);
		background: linear-gradient(180deg, #e2fff4 0, #eef1f6);
		background: -webkit-linear-gradient(180deg, #dff1ff 0, #eef1f6);
		background: -o-linear-gradient(to bottom, #dff1ff 0, #eef1f6 100%);
		background: -moz-linear-gradient(to bottom, #dff1ff 0, #eef1f6 100%);
		background: linear-gradient(180deg, #dff1ff 0, #eef1f6);
		background-size: 100% 700px;
		background-repeat: no-repeat;
	}
	.bus-detail-header .rule-line {
	    max-height: 100px;
	    font-size: 12px;
	    display: flex;
	    justify-content: space-between;
	    align-items: flex-start;
	    padding: 4px 0;
	    // border-top: 1px dashed #f4f4f4
	}
	
	
	.bus-detail-header .rule-line .rule-list {
	    color: #666;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: flex;
	    flex: 1;
	    flex-wrap: wrap;
	    max-height: 34px
	}
	
	.bus-detail-header .rule-line .rule-list .rule-item:after {
	    margin: 0 4px;
	    height: 12px;
	    content: "";
	    border-right: 1px solid #999;
	    display: inline-block;
	    vertical-align: 0
	}
	
	.bus-detail-header .rule-line .rule-list .rule-item:last-child:after {
	    display: none
	}
	
	.bus-detail-header .rule-line .product-desc {
	    color: #5678a8;
	    min-width: 24px
	}
	.locpop .dot {
	    height: 6px;
	    width: 6px;
	    border-radius: 50%;
	    margin: 11px
	}
	.in-desc-header-container {
	    background: #fff;
	    border-radius: 6px;
	    border: 1px solid #ddd;
	    margin: 16px 0;
	    overflow: hidden;
	}
	.tag-title {
	    color: #333;
	    font-size: 17px;
	    padding: 8px 0 3px;
	    font-weight: 800;
	    line-height: 20px;
	}
	 .tag-content {
	    color: #333;
	    font-size: 14px;
	    line-height: 25px;
	}
</style>
